"use client"

import { useEffect, useRef } from "react"

const productsData = [
  {
    title: "产品1 - 企业数字营销诊断与基建开发",
    description: "为企业提供全面的数字营销现状诊断和基础设施建设，助力企业数字化转型",
    features: ["企业诊断", "基建开发", "数据分析", "策略制定"],
    caseStudies: [
      { name: "SCHENDER", growth: "业绩增长300%" },
      { name: "玛缇瓷磗", growth: "转化率提升250%" },
      { name: "其他品牌", growth: "平均增长200%" }
    ],
    bgColor: "bg-techBlue-50",
    accentColor: "text-techBlue-500"
  },
  {
    title: "产品2 - AI智能营销管理系统",
    description: "基于AI技术的智能营销管理平台，包含9大核心系统，全面提升营销效率",
    features: ["客户管理系统", "内容管理系统", "数据分析系统", "营销自动化"],
    coreSystems: [
      "客户关系管理(CRM)", "内容管理系统(CMS)", "数据分析平台(DMP)",
      "营销自动化引擎", "社交媒体管理", "电商运营系统",
      "客服智能系统", "财务管理系统", "人力资源系统"
    ],
    bgColor: "bg-energyOrange-50",
    accentColor: "text-energyOrange-500"
  },
  {
    title: "产品3 - 智能获客与转化平台",
    description: "通过AI算法实现精准获客，提升转化率，降低获客成本",
    features: ["精准获客", "智能转化", "成本优化", "效果监控"],
    highlights: ["平均获客成本降低40%", "转化率提升60%", "ROI增长150%"],
    bgColor: "bg-techBlue-50",
    accentColor: "text-techBlue-500"
  },
  {
    title: "产品4 - 全渠道营销自动化系统",
    description: "整合线上线下多渠道，实现营销活动的自动化管理和优化",
    features: ["多渠道整合", "营销自动化", "智能优化", "实时监控"],
    channels: ["微信生态", "抖音平台", "小红书", "淘宝天猫", "线下门店", "官方网站"],
    bgColor: "bg-energyOrange-50",
    accentColor: "text-energyOrange-500"
  },
  {
    title: "产品5 - 数据智能分析与决策支持",
    description: "基于大数据和AI技术，为企业提供智能化的数据分析和决策支持",
    features: ["数据采集", "智能分析", "可视化报表", "决策支持"],
    capabilities: ["实时数据监控", "预测性分析", "用户行为洞察", "市场趋势预测"],
    bgColor: "bg-techBlue-50",
    accentColor: "text-techBlue-500"
  }
]

export default function ProductSection() {
  const sectionRef = useRef<HTMLElement>(null)

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate-fadeInUp")
          }
        })
      },
      { threshold: 0.1 }
    )

    if (sectionRef.current) {
      const elements = sectionRef.current.querySelectorAll(".animate-on-scroll")
      elements.forEach((el) => observer.observe(el))
    }

    return () => observer.disconnect()
  }, [])

  return (
    <section
      id="products"
      ref={sectionRef}
      className="py-20 lg:py-28 bg-bgPrimary"
    >
      <div className="container mx-auto px-4 lg:px-8">
        
        {/* 标题区域 */}
        <div className="text-center mb-16">
          <h2 className="animate-on-scroll text-heading text-techBlue-500 mb-6">产品</h2>
          <h3 className="animate-on-scroll text-subheading text-textPrimary mb-8">蜜多云科技全链路产品矩阵</h3>
          <p className="animate-on-scroll text-body text-textSecondary max-w-3xl mx-auto leading-relaxed">
            我们为大家居企业提供从诊断分析到营销执行的全链路产品解决方案，
            每个产品都经过深度的行业实践验证，确保为您的企业带来实际的增长价值
          </p>
        </div>

        {/* 产品列表 */}
        <div className="space-y-12">
          {productsData.map((product, index) => (
            <div key={index} className="animate-on-scroll">
              <div className={`${product.bgColor} rounded-2xl p-8 lg:p-12 border border-divider hover:shadow-hover transition-all duration-300`}>
                
                {/* 产品标题和描述 */}
                <div className="mb-8">
                  <h3 className={`text-2xl lg:text-3xl font-bold ${product.accentColor} mb-4`}>
                    {product.title}
                  </h3>
                  <p className="text-body text-textSecondary leading-relaxed mb-6">
                    {product.description}
                  </p>
                  
                  {/* 基础特性 */}
                  <div className="flex flex-wrap gap-3">
                    {product.features.map((feature, idx) => (
                      <span 
                        key={idx}
                        className={`px-4 py-2 ${product.accentColor} bg-white rounded-lg text-sm font-medium border border-current`}
                      >
                        {feature}
                      </span>
                    ))}
                  </div>
                </div>

                {/* 产品特色内容 */}
                <div className="grid lg:grid-cols-2 gap-8">
                  
                  {/* 左侧内容 */}
                  <div>
                    {/* 产品1的客户案例 */}
                    {product.caseStudies && (
                      <div>
                        <h4 className="text-lg font-bold text-textPrimary mb-4">客户成功案例</h4>
                        <div className="space-y-3">
                          {product.caseStudies.map((caseStudy, idx) => (
                            <div key={idx} className="flex items-center justify-between bg-white p-4 rounded-lg border border-divider">
                              <span className="font-medium text-textPrimary">{caseStudy.name}</span>
                              <span className={`${product.accentColor} font-bold`}>{caseStudy.growth}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* 产品2的9大核心系统 */}
                    {product.coreSystems && (
                      <div>
                        <h4 className="text-lg font-bold text-textPrimary mb-4">9大核心系统</h4>
                        <div className="grid grid-cols-1 gap-2">
                          {product.coreSystems.map((system, idx) => (
                            <div key={idx} className="flex items-center gap-3 bg-white p-3 rounded-lg border border-divider">
                              <svg className={`w-5 h-5 ${product.accentColor}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                              </svg>
                              <span className="text-textSecondary">{system}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* 产品3的亮点数据 */}
                    {product.highlights && (
                      <div>
                        <h4 className="text-lg font-bold text-textPrimary mb-4">核心优势</h4>
                        <div className="space-y-3">
                          {product.highlights.map((highlight, idx) => (
                            <div key={idx} className="flex items-center gap-3 bg-white p-4 rounded-lg border border-divider">
                              <svg className={`w-6 h-6 ${product.accentColor}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                              </svg>
                              <span className="text-textPrimary font-medium">{highlight}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* 产品4的渠道展示 */}
                    {product.channels && (
                      <div>
                        <h4 className="text-lg font-bold text-textPrimary mb-4">覆盖渠道</h4>
                        <div className="grid grid-cols-2 gap-3">
                          {product.channels.map((channel, idx) => (
                            <div key={idx} className="bg-white p-3 rounded-lg border border-divider text-center">
                              <span className="text-textPrimary font-medium">{channel}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* 产品5的能力展示 */}
                    {product.capabilities && (
                      <div>
                        <h4 className="text-lg font-bold text-textPrimary mb-4">核心能力</h4>
                        <div className="space-y-3">
                          {product.capabilities.map((capability, idx) => (
                            <div key={idx} className="flex items-center gap-3 bg-white p-3 rounded-lg border border-divider">
                              <svg className={`w-5 h-5 ${product.accentColor}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                              </svg>
                              <span className="text-textSecondary">{capability}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>

                  {/* 右侧内容 - 统一的产品亮点 */}
                  <div className="bg-white p-6 rounded-xl border border-divider">
                    <h4 className="text-lg font-bold text-textPrimary mb-4">产品亮点</h4>
                    <ul className="space-y-3">
                      <li className="flex items-center gap-3">
                        <svg className={`w-5 h-5 ${product.accentColor}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        <span className="text-textSecondary">AI技术驱动，智能化程度高</span>
                      </li>
                      <li className="flex items-center gap-3">
                        <svg className={`w-5 h-5 ${product.accentColor}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span className="text-textSecondary">深度贴合大家居行业需求</span>
                      </li>
                      <li className="flex items-center gap-3">
                        <svg className={`w-5 h-5 ${product.accentColor}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                        </svg>
                        <span className="text-textSecondary">数据驱动，效果可量化</span>
                      </li>
                      <li className="flex items-center gap-3">
                        <svg className={`w-5 h-5 ${product.accentColor}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                        </svg>
                        <span className="text-textSecondary">专业团队全程服务支持</span>
                      </li>
                    </ul>
                  </div>

                </div>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  )
} 